<template>
	<view class="topUp" :class='equipment'>



		<u-subsection :list="list" mode="subsection" activeColor="#FF5029" :current="current"
			@change="subsectionChange"></u-subsection>


		<view class="item_box" v-show="current === 0">
			<view class="title_">
				银行卡支付
			</view>
			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_yhk" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="api_index_rechargeFun()">
					确认充值
				</view>
			</view>
			<view class="qianyueyaoshu">
				请直接转账到以下银行账户
			</view>
			<view class="cart" @click="fuzhi(yhk_data.mybankname)">
				<view class="" style="width: 25%;">
					开户名称:
				</view>
				<view class="mesage">
					{{yhk_data.mybankname}}
				</view>
			</view>
			<view class="cart" @click="fuzhi(yhk_data.bankid)">
				<view class="" style="width: 25%;">
					开户账户:
				</view>
				<view class="mesage">
					{{yhk_data.bankid}}
				</view>
			</view>
			<view class="cart" @click="fuzhi(yhk_data.bankname)">
				<view class="" style="width: 25%;">
					开户行名:
				</view>
				<view class="mesage">
					{{yhk_data.bankname}}
				</view>
			</view>
			<view class="cart" @click="fuzhi(yhk_data.bankaddress)">
				<view class="" style="width: 25%;">
					开户地址:

				</view>
				<view class="mesage">
					{{yhk_data.bankaddress}}
				</view>
			</view>
			<view class="qianyueyaoshu">
				可点击红色文字复制银行账户信息
			</view>
			<view class="">
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardProsPathselect" limit="1" ref="filePicker" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image">
						<view class="">
							点击上传交易凭证
						</view>
					</uni-file-picker>
				</view>
			</view>
		</view>

		<view class="item_box" v-show="current === 1">
			<view class="title_">
				微信支付宝充值
			</view>
			<view class="chongzhi">
				<view class="left">
					<input type="text" v-model="parice_yhk" class="input" value="" placeholder="请输入充值金额" />
				</view>
				<view class="button" @click="api_index_rechargeFun()">
					确认充值
				</view>
			</view>
			<image :src="yhk_data.qrcode" style="width: 100%" mode="widthFix"></image>
			<view class="">
				<view class="example-body custom-image-box">
					<uni-file-picker @select="legalIdCardProsPathselect" limit="1" ref="filePicker" :del-icon="false"
						disable-preview :imageStyles="imageStyles" file-mediatype="image">
						<view class="">
							点击上传交易凭证
						</view>
					</uni-file-picker>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		api_index_recharge,
		api_index_bank_info
	} from '@/api/member.js'
	export default {
		data() {
			return {
				list: ['银行充值', '微信支付宝充值'],
				current: 0,
				yhk_data: {},
				parice_yhk: '',
				imageStyles: {
					width: '100%',
					height: 150,
				},
				yhk_jypz: '',
				openid: '',
				equipment: ''
			};
		},
		onShow() {
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					// this.get_data()
					// this.get_data1()
					this.get_yhkdata()
				},
				fail: () => {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			});
		},
		methods: {
			subsectionChange(e) {
				this.current = e;
			},
			fuzhi(value) {
				var value = value
				uni.setClipboardData({
					data: value,
					success: function() {
						uni.showToast({

							icon: 'success',
							duration: 1000
						});
					},
					fail: function() {
						uni.showToast({

							icon: 'error',
							duration: 1000
						});
					}
				});
			},
			async get_yhkdata() {
				let data = await api_index_bank_info(this.openid);
				this.yhk_data = data;

			},
			legalIdCardProsPathselect(e) {

				var filePath = e.tempFilePaths[0]

				var _this = this

				uni.uploadFile({
					url: 'http://admin.huixiangshenghuo.net/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',

					filePath: filePath,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {

						var data = JSON.parse(res.data)


						if (data.error == 0) {

							_this.yhk_jypz = data.url


						} else {


							_this.yhk_jypz = ''
							uni.showToast({
								title: '文件上传失败',
								icon: 'none'
							})
							_this.$refs.filePicker.clearFiles();
						}
					},
					fail() {

					}
				});

			},
			async api_index_rechargeFun() {
				let up = {
					openid: this.openid,
					money: this.parice_yhk,
					type: this.current === 0 ? 'bank' : "alipay",
					pic_url: this.yhk_jypz
				}
				let data = await api_index_recharge(up);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
				}, 1000)
			}

		}
	}
</script>

<style lang="scss">
	.App {
		height: 100vh;
	}

	.H5 {
		height: calc(100vh - 88rpx);
	}

	.topUp {
		width: 100%;
		padding: 50rpx;
		background-color: #F2F2F2;

	}

	.item_box {
		margin-top: 40rpx;
		width: 100%;
		// margin: 40rpx auto;
		background-color: #fff;
		border-radius: 15px;
		padding: 30rpx;
		box-shadow: 0 0 6px #ccc;
		line-height: 60rpx;

		view {
			font-size: 14px;
			font-weight: 500;
		}

		.cart {
			display: flex;
			align-items: center;

			.mesage {
				// margin-left: 5rpx;
				line-height: 40rpx;
				flex: 1;
				color: #FF5029;
			}
		}

		.title_ {
			font-size: 20px;
			font-weight: 800;
			color: #FF5029;
		}

		.qianyue {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.right {
				display: flex;
				// width: 50%;
				justify-content: end;

				.button {
					width: 100%;
					background-color: #DBD9D9;
					border-radius: 5px;
					text-align: center;
				}

				.button_red {
					width: 45%;
					background-color: #C5000B;
					border-radius: 5px;
					color: #fff;
					text-align: center;
				}
			}
		}

		.qianyueyaoshu {}

		.no_cart {
			width: 100%;
			display: flex;
			justify-content: space-between;

			.left {
				color: #C5000B;
			}

			.right {
				display: flex;
				width: 50%;
				justify-content: space-between;

				.button {
					width: 45%;
					background-color: #DBD9D9;
					border-radius: 5px;
					text-align: center;
				}

				.button_red {
					width: 45%;
					background-color: #C5000B;
					border-radius: 5px;
					color: #fff;
					text-align: center;
				}
			}
		}

		.chongzhi {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: flex-end;

			.left {
				width: 65%;
				border-bottom: 1px solid #C0C0C2;
				height: 100rpx;

				.input {
					width: 100%;
					height: 100rpx;
					text-align: center;
				}
			}

			.button {
				width: 40%;
				height: 70rpx;
				background: linear-gradient(3deg, #ff3232, #ff3232, #ff8719);
				color: #fff;
				text-align: center;
				line-height: 70rpx;
				border-radius: 20rpx;
			}

		}
	}
</style>